Jassif Team Institution

HTML Web Storage API

HTML वेब संग्रहण API; कुकीज़ से बेहतर.

HTML वेब स्टोरेज क्या है?

वेब स्टोरेज के साथ, एप्लिकेशन उपयोगकर्ता के ब्राउज़र में स्थानीय रूप से डेटा संग्रहीत कर सकते हैं।

HTML5 से पहले, एप्लिकेशन डेटा को कुकीज़ में संग्रहीत करना पड़ता था, जिन्हें प्रत्येक सर्वर अनुरोध में जोड़ा जाता था। वेब स्टोरेज बहुत सुरक्षित है, और वेबसाइट के प्रदर्शन को प्रभावित किए बिना बड़ी मात्रा में डेटा स्थानीय रूप से संग्रहीत किया जा सकता है।

कुकीज़ के विपरीत, भंडारण सीमा बहुत बड़ी है (कम से कम 5 एमबी) और जानकारी सर्वर पर स्थानांतरित नहीं होती है।

वेब संग्रहण उत्पत्ति (डोमेन और प्रोटोकॉल पर आधारित) पर आधारित है। सभी पृष्ठ एक ही मूल से समान डेटा संग्रहीत और एक्सेस कर सकते हैं।

वेब संग्रहण एपीआई ऑब्जेक्ट

वेब स्टोरेज ब्राउज़र में डेटा संग्रहीत करने के लिए दो ऑब्जेक्ट प्रदान करता है:

ब्राउज़र समर्थन

तालिका में संख्याएँ पहले ब्राउज़र संस्करण का प्रतिनिधित्व करती हैं जो वेब स्टोरेज का पूरी तरह से समर्थन करता है।

वेब स्टोरेज एपीआई समर्थन का परीक्षण करें

वेब स्टोरेज का उपयोग करने से पहले, आइए लोकलस्टोरेज और सेशनस्टोरेज के लिए ब्राउज़र समर्थन की तुरंत जाँच करें:

<script>
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
  x.innerHTML = "Your browser supports Web storage!";
} else {
  x.innerHTML = "Sorry, no Web storage support!";
}
</script>

लोकलस्टोरेज ऑब्जेक्ट

लोकलस्टोरेज ऑब्जेक्ट बिना समाप्ति तिथि के डेटा संग्रहीत करता है। ब्राउज़र बंद होने पर भी डेटा नष्ट नहीं होता है और अगले दिन, सप्ताह या वर्ष के लिए उपलब्ध रहता है।

<स्क्रिप्ट> स्थिरांक x = document.getElementById('परिणाम'); यदि (टाइपऑफ़ (भंडारण) !== "अपरिभाषित") { // सहेजें localStorage.setItem ("अंतिम नाम", "स्मिथ"); localStorage.setItem('bgcolor', 'पीला'); // पुनर्स्थापित करें x.innerHTML = localStorage.getItem("अंतिम नाम"); x.style.backgroundColor = localStorage.getItem("bgcolor"); }अन्यथा{ x.innerHTML = "क्षमा करें, कोई वेब संग्रहण समर्थन नहीं!"; } </स्क्रिप्ट>

उदाहरण स्पष्टीकरण:

1. नाम/मूल्य जोड़े बनाने के लिएlocalStorage.setItem()विधि का प्रयोग करें
2. सेट मान पुनः प्राप्त करने के लिएlocalStorage.getItem()विधि का प्रयोग करें
3. "अंतिम नाम" मान पुनः प्राप्त करेंid="result"तत्व में डालें
4. "बीजीकलर" का मान पुनः प्राप्त करें।id="result"बैड के बाद एलिमेंट में रंग डालें

"अंतिम नाम" लोकलस्टोरेज तत्व को हटाने का सिंटैक्स इस प्रकार है:

localStorage.removeItem("lastname");

लोकलस्टोरेज के साथ क्लिक की गिनती

निम्नलिखित उदाहरण यह गिनता है कि उपयोगकर्ता ने कितनी बार एक बटन पर क्लिक किया है। इस कोड में मान को एक स्ट्रिंग संख्या में परिवर्तित किया जाता है ताकि काउंटर को बढ़ाया जा सके:

<script>
function clickCounter() {
  const x = document.getElementById("result");
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount)+1;
    } else {
      localStorage.clickcount = 1;
    }
    x.innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s)!";
  } else {
    x.innerHTML = "Sorry, no Web storage support!";
  }
}
</script>

सेशनस्टोरेज ऑब्जेक्ट

सेशनस्टोरेज ऑब्जेक्ट लोकलस्टोरेज ऑब्जेक्ट के बराबर है, जो केवल एक सत्र के लिए डेटा संग्रहीत करता है! जब उपयोगकर्ता निर्दिष्ट ब्राउज़र टैब बंद कर देता है तो डेटा हटा दिया जाता है।

सेशनस्टोरेज के साथ क्लिक की गिनती

निम्न उदाहरण यह गणना करता है कि किसी उपयोगकर्ता ने वर्तमान सत्र में किसी बटन पर कितनी बार क्लिक किया है:

<script>
function clickCounter() {
  const x = document.getElementById("result");
  if (typeof(Storage) !== "undefined") {
    if (sessionStorage.clickcount) {
      sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
    } else {
      sessionStorage.clickcount = 1;
    }
    x.innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session!";
  } else {
    x.innerHTML = "Sorry, no Web storage support!";
  }
}
</script>

वेब भंडारण के तरीके

अभ्यास